/* CSS file for "Dames van HR" 201801 ver1.0 */
/* NB: this is how you write comments */
/* basic syntax: element { property: setting;} */
/* id in HTML > # in CSS */
/* class in HTML > . in CSS */
/* color scheme: #f1f3f4 (offwhite), #2b73b3 (blue), #00004d (very dark blue, text), #3399ff bright blue, #33cccc green blue, */
body { 
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  background-color: #edf7d7;
  background-attachment: fixed; 
  }
  /* orange color: #ffd53f*/
header {
	clear: both; 
	width: 70%;
	margin: 0 auto;
	height: 130px;
	background-color: #f8ff7f;
	/*#2b73b3;*/
}

.logo {
position: fixed;
float: left;
top: 5px;
left: 17%;
height: 80px;
z-index: 2;
border-radius: 40px;	
}
.logo:hover {
	box-shadow: 0 0 30px #fefef9;
}
nav {
	position: fixed; 
	width: 100%;
	margin: 0 auto;
	z-index: 1;
	
}

#slider {
	margin: 0px auto;
	width: 100%;
	min-width: 600px;
	overflow: visible;
}

.mySlides {
	height: 400px;
	width: 100%;
	margin-top: -100px;
}

#slider > div {
	position: absolute;
}

.main {
	background-color: #fefef9; 
    margin: 0 auto;
	width: 70%;
	min-width: 600px;
	padding: 100px 0px;
	overflow: hidden;
}
.main-column {
	column-count: 3;
    -webkit-column-count: 3;
	width: 70%;
	margin: 30px auto;

}
section {
	float: left;
	max-width: 1200px;
	min-width: 300px;
	margin-left: 200px;
}
article {
	font-family: SegoeUI;
}

footer {
	clear: both;
	height: 200px;
	width: 70%;
	min-width: 600px;
	margin: 0 auto;
	background-color: #70c90a; /*2b73b3;*/
	padding: 40px 0px;
}
.circle-div-container {
	margin: 0 auto;
	width: 70%;
	display: flex;
}
.circle-divs {
	margin-left: 20px;
	height: 200px;
	width: 200px;
	border-radius: 200px;
	border: 10px solid green;
	display: inline-block;
	justify-content: center;
}
.circle-img {
	height: 100%;
	width: 100%;
	border-radius: 200px;
}

.linkedin {
	padding: 5px;
	opacity: 0.75;
	border-style: hidden;
	border-radius: 10px;

	
}
.linkedin:hover {
	opacity: 1;
	
}
.images{
	width: 100%;
	margin: 20px 0px;
}
h1 {
	font-family: Tahoma, SegoeUI, sans-serif;
	font-size: 26px; 
	letter-spacing: 2px; /*font spacing */
	color: #00004d;
	padding-left: 0px;
	border-bottom: 1px solid #00004d;
	margin: 10px auto;
	width: 70%;
	padding: 10px 0px;
}
h3 {
	font-family: Tahoma, SegoeUI, sans-serif;
	color: #00004d;
	font-size: 14px;
	margin: 0 auto;
	width: 70%;
}
p {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: #00004d;
  text-align: left; 
  margin: 20px auto;
  width: 70%;
  /* line spacing*/
}

ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 5px 0px;
  overflow: hidden;
  background-color: #70c90a; /*#003366; */
  position: fixed;
  top: 0;
  width: 70%;
  min-width: 600px;
  /* old color: #333;*/
}

li {
  float: left;
  width: 160px;
  height: 40px;
  padding: 20px 5px;
}

li a {
  font-family: SegoeUI, sans-serif;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  display: block; 
  color: #fefef9;
  text-align: center;
  text-decoration: none;
 
}

li a:hover {
	background-image: linear-gradient(green, #70c90a);
	text-shadow: 0 0 3px yellow;
}
li a:active {
	color: yellow;
}
.hr-icons-div {
	display: table;
	margin: 30px auto;
	padding: 10px 10px;
	border: 1px solid black;
}
.hr-icons-div a {
	display: table-cell;
	text-align: center;
	width: 16%;
}
.hr-icons{
	width: 100%;
	max-width: 120px;
	
}
.HR-list-list{
    font-size: 1.6em;
	font-family: Verdana, sans-serif;
	color: #00004d;
	width: 70%;
    margin: 0 auto;
	list-style-type: circle;
}
.HR-list{
	width: 50%;
	padding: 0px 0px; /*if this is deleted, the list will not split in 2 columns, but instead 1 long list*/
}
.email{
	margin: 0 auto;
	text-align: center;
	width: 120px;
}
.email:hover {
	color:  #fefef9; 
}
.company-data {
	display: block;
	padding-top: 5px;
	margin:0 auto;
	text-align: center;
	
}
#footericons {
	margin: 0 auto;
	width: 120px;
	display: block;
	text-align: center;
}
#signature {
	text-align: center;
	font-size: 10px;
	
}
.main::before {
  content:"";
  display:block;
  height:90px; /* fixed header height*/
  margin:-90px 0 0; /* negative fixed header height */
}

#menu-icon {
	display: hidden;
	width: 30px;
	height: 30px;
	background: #4C8FEC url(images/menu-icon.png) center;
}
a:hover#menu-icon {
	background-color: #444;
	border-radius: 4px 4px 0 0; 
}
/*smaller displays will follow these CSS rules*/

@media only screen and (max-width: 1350px) {
	
	header {
		width: 900px;
	}
	footer {
		width: 900px;
	}
	nav {
		width: 900px;
	}
	ul {
		width: 900px;
	}
	.main {
		width: 900px;
	}
	.logo {
	position: fixed;
	float: left;
	top: 5px;
	
	height: 80px;
	z-index: 2;
	border-radius: 40px;	
	}
	#li-logo {
		
	}
}
@media only screen and (max-width: 1000px) {
	.main {
		width: 95%;
		min-width: 699px;
	}
	.logo {
		position: fixed;
		float: left;
		top: 5px;
		left: 5%;
		height: 80px;
		z-index: 999;
		border-radius: 40px;	
	}
	header {
		width: 95%;
		height: 100px;
		min-width: 699px;
	}
	footer {
		width: 95%;
		min-width: 699px;
	}
	nav {
		width: 95%;
		min-width: 699px;
		
	}
	ul {
		width: 95%;
		min-width: 699px;
		height: 80px;
	}
	li {
		width: 100px;
	}
	li a {
		font-size: 12px;
		
	}
	
}
@media only screen and (max-width: 700px) {
#menu-icon {
	display: inline-block;
	}
header {
	width: 100%;
	min-width: 300px;
}
footer {
	width: 100%;
	min-width: 300px;
}
.main {
	width: 100%;
	min-width: 300px;
	margin: 0 auto;
	padding: 20px 0px;
}
nav {
    width: 100%;
	min-width: 300px;
}
ul {
	height: 80px;
}
h1, h3, p {
	width: 90%;
	margin: 10px auto;
}
ul.nav li {
	display: none;
}

.main-column {
	column-count: 3;
    -webkit-column-count: 3;
	width: 90%;
	margin: 10px auto;
}

.images{
	width: 100%;
}

.logo {
position: fixed;
float: left;
top: 5px;
left: 10px;
height: 80px;
z-index: 2;
border-radius: 40px;	
}

#slider {
	margin: 0px auto;
	width: 100%;
	min-width: 300px;
	overflow: visible;
}

.mySlides {
	max-height: 100%;
	max-width: 100%;
	
}
}